<template>

  <div>

    <!-- 遮罩层 -->
    <com-modal :visible="visible"
               @modalHiden="hiden">
    </com-modal>

    <!-- 弹窗层 -->
    <div class="pop-main" v-if="visible">
      <div class="pop-head">
        <div class="pop-head-title">{{ title }}</div>
        <div class="pop-head-hiden"
             @click="hiden">
          <el-icon class="el-icon-close"/>
        </div>
      </div>
      <div class="pop-content">
        <slot></slot>
      </div>
    </div>

  </div>

</template>

<script>
import ComModal from "@/components/common/com-modal/com-modal";

export default {
  name: "con-pop",
  components: {
    ComModal,
  },
  props: {
    // 显示状态
    visible: {
      type: Boolean,
      default: false
    },
    // 标题
    title: {
      type: String,
      default: ""
    }
  },
  data: function () {
    return {}
  },
  computed: {},
  methods: {
    hiden: function () {

      this.visible = false;
      this.$emit("popHiden");
    }
  }
}
</script>

<style scoped lang="less">
@import "con-pop.less";
</style>